/*
  自定义变量
 */

/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
// @import '../color/colors';

@primary-color: #108ee9;
@item-hover-bg: #108ee9;
@primary-2: #108ee9;
@checkbox-check-color: #108ee9;
@highlight-color: #108ee9;
@line-height-base: 1.5;
@border-radius-base: 4px;
@border-radius-sm: 2px;
@font-size-sm: 12px;
@text-color: #fff;
@text-color-secondary: #333;
@disabled-color: #636363;
@component-background: #fff;
// Border color
@border-color-base: hsv(0, 0, 85%); // base border outline a component
@border-color-split: hsv(0, 0, 91%); // split border inside a component
@border-color-inverse: #ffffff;
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border


// The prefix to use on all css classes from ant.
@ant-prefix: ant;

// An override for the html selector for theme prefixes
@html-selector: html;

// Tree
// ---
@tree-title-height: 24px;
@tree-child-padding: 18px;
@tree-directory-selected-color: #fff;
@tree-directory-selected-bg: @primary-color;
@tree-node-hover-bg: @item-hover-bg;
@tree-node-selected-bg: @primary-2;
@icon-color: #333;

.iconfont-mixin() {
  display: inline-block;
  color: @icon-color;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  >* {
    line-height: 1;
  }

  svg {
    display: inline-block;
  }

  &::before {
    display: none; // dont display old icon.
  }

  & &-icon {
    display: block;
  }
}

// for iconfont font size
// fix chrome 12px bug, support ie
.iconfont-size-under-12px(@size, @rotate: 0deg) {
  display: inline-block;
  @font-scale: unit(@size / 12px);

  font-size: 12px;
  // IE9
  font-size:~'@{size} \9';
  transform: scale(@font-scale) rotate(@rotate);

  :root & {
    font-size: @font-size-sm; // reset IE9 and above
  }
}


// -----------------------------------------------------------------


@tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-showline-icon-color: @text-color-secondary;
@tree-node-padding: 4px;


/*
  目录树图标箭头
 */
@tree-select-prefix-cls: ~'@{ant-prefix}-select';

.antTreeSwitcherIcon(@type: 'tree-default-open-icon') {

  .ant-tree-switcher-icon,
  .@{tree-select-prefix-cls}-switcher-icon {
    .iconfont-size-under-12px(10px);

    display: inline-block;
    font-weight: bold;

    svg {
      transition: transform 0.3s;
    }
  }
}

// -------------------------------------------------------------

  .ant-tree {

    &-checkbox-checked::after {
      position: absolute;
      top: 16.67%;
      left: 0;
      width: 100%;
      height: 66.67%;
    }
  
    margin: 0;
    padding: 0;
  
    ol,
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  
    li {
      margin: 0;
      padding: @tree-node-padding 0;
      white-space: nowrap;
      list-style: none;
      outline: 0;
      span[draggable],
      span[draggable='true'] {
        line-height: @tree-title-height - 4px;
        border-top: 2px transparent solid;
        border-bottom: 2px transparent solid;
        user-select: none;
        /* Required to make elements draggable in old WebKit */
        -khtml-user-drag: element;
        -webkit-user-drag: element;
      }
  
      &.drag-over {
        >span[draggable] {
          color: white;
          background-color: @primary-color;
          opacity: 0.8;
        }
      }
  
      &.drag-over-gap-top {
        >span[draggable] {
          border-top-color: @primary-color;
        }
      }
  
      &.drag-over-gap-bottom {
        >span[draggable] {
          border-bottom-color: @primary-color;
        }
      }
  
      &.filter-node {
        >span {
          color: @highlight-color  !important;
          font-weight: 500 !important;
        }
      }
  
      // When node is loading
      &.ant-tree-treenode-loading {
        span {
          &.ant-tree-switcher {
  
            &.ant-tree-switcher_open,
            &.ant-tree-switcher_close {
              .ant-tree-switcher-loading-icon {
                position: absolute;
                left: 0;
                display: inline-block;
                width: 24px;
                height: @tree-title-height;
                color: @primary-color;
                font-size: 14px;
                transform: none;
  
                svg {
                  position: absolute;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  margin: auto;
                }
              }
  
              :root &::after {
                opacity: 0;
              }
            }
          }
        }
      }
  
      ul {
        margin: 0;
        padding: 0 0 0 @tree-child-padding;
      }
  
      .ant-tree-node-content-wrapper {
        display: inline-block;
        height: @tree-title-height;
        margin: 0;
        padding: 0 5px;
        color: @text-color;
        line-height: @tree-title-height;
        text-decoration: none;
        vertical-align: top;
        border-radius: @border-radius-sm;
        cursor: pointer;
        transition: all 0.3s;
  
        &:hover {
          background-color: @tree-node-hover-bg;
        }
  
        &.ant-tree-node-selected {
          background-color: @tree-node-selected-bg;
        }
      }
  
      span {
        &.ant-tree-checkbox {
          top: initial;
          height: @tree-title-height;
          margin: 0 4px 0 2px;
          padding: ((@tree-title-height - 16px) / 2) 0;
        }
  
        &.ant-tree-switcher,
        &.ant-tree-iconEle {
          display: inline-block;
          width: 24px;
          height: @tree-title-height;
          margin: 0;
          line-height: @tree-title-height;
          text-align: center;
          vertical-align: top;
          border: 0 none;
          outline: none;
          cursor: pointer;
        }
  
        &.ant-tree-iconEle:empty {
          display: none;
        }
  
        &.ant-tree-switcher {
          position: relative;
  
          &.ant-tree-switcher-noop {
            cursor: default;
          }
  
          &.ant-tree-switcher_open {
            .antTreeSwitcherIcon();
          }
  
          &.ant-tree-switcher_close {
            .antTreeSwitcherIcon();
  
            .ant-tree-switcher-icon {
              svg {
                transform: rotate(-90deg);
              }
            }
          }
        }
      }
  
      &:last-child>span {
  
        &.ant-tree-switcher,
        &.ant-tree-iconEle {
          &::before {
            display: none;
          }
        }
      }
    }
  
    >li {
      // &:first-child {
      //   padding-top: 7px;
      // }
  
      &:last-child {
        padding-bottom: 7px;
      }
    }
  
    &-child-tree {
  
      // https://github.com/ant-design/ant-design/issues/14958
      >li {
  
        // Provide additional padding between top child node and parent node
        // &:first-child {
        //   padding-top: 2 * @tree-node-padding;
        // }
  
        // Hide additional padding between last child node and next parent node
        &:last-child {
          padding-bottom: 0;
        }
      }
    }
  
    li&-treenode-disabled {
  
      >span:not(.ant-tree-switcher),
      >.ant-tree-node-content-wrapper,
      >.ant-tree-node-content-wrapper span {
        color: @disabled-color;
        cursor: not-allowed;
      }
  
      >.ant-tree-node-content-wrapper:hover {
        background: transparent;
      }
    }
  
    &-icon__open {
      margin-right: 2px;
      vertical-align: top;
    }
  
    &-icon__close {
      margin-right: 2px;
      vertical-align: top;
    }
  
    &&-show-line {
      li {
        position: relative;
  
        span {
          &.ant-tree-switcher {
            color: @tree-showline-icon-color;
            background: @component-background;
  
            &.ant-tree-switcher-noop {
              // .antTreeShowLineIcon('tree-doc-icon');
            }
  
            &.ant-tree-switcher_open {
              // .antTreeShowLineIcon('tree-showline-open-icon');
            }
  
            &.ant-tree-switcher_close {
              // .antTreeShowLineIcon('tree-showline-close-icon');
            }
          }
        }
      }
  
      li:not(:last-child)::before {
        position: absolute;
        left: 12px;
        width: 1px;
        height: 100%;
        height: calc(100% - 22px); // Remove additional height if support
        margin: 22px 0 0;
        border-left: 1px solid @border-color-base;
        content: ' ';
      }
    }
  
    &.ant-tree-icon-hide {
      .ant-tree-treenode-loading {
        .ant-tree-iconEle {
          display: none;
        }
      }
    }
  
    &.ant-tree-block-node {
      li {
        .ant-tree-node-content-wrapper {
          width: ~'calc(100% - 24px)';
        }
  
        span {
          &.ant-tree-checkbox {
            +.ant-tree-node-content-wrapper {
              width: ~'calc(100% - 46px)';
            }
          }
        }
      }
    }
  }
  .ant-tree-checkbox {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: 'tnum';
    position: relative;
    top: -0.09em;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    outline: none;
    cursor: pointer;
  }
  .ant-tree li span.ant-tree-checkbox {
    top: initial;
    height: 26px;
    margin: 0 4px 0 2px;
    padding: 5px 0;
  }
  .ant-tree-checkbox-inner, .ant-checkbox-inner {
    background-color: #222330;
    border: 1px solid #51576C;
    border: none;
    margin-right: 4px;
  }
  .ant-tree-checkbox-inner {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 16px;
    height: 16px;
    background-color: #fff;
    // border: 1px solid transparent;
    border-radius: 2px;
    border-collapse: separate;
    transition: all 0.3s;
  }
  .ant-tree-checkbox-checked:after {
    position: absolute;
    top: 16.67%;
    left: 0;
    width: 100%;
    height: 66.67%;
  }
  .ant-tree-checkbox-checked:after {
    top: 0;
    height: 100%;
    border: 1px solid #4e68f0;
    border-radius: 2px;
    visibility: hidden;
    animation: antCheckboxEffect .36s ease-in-out;
    animation-fill-mode: backwards;
    content: "";
  }
  .ant-tree-checkbox-checked .ant-tree-checkbox-inner:after {
    position: absolute;
    display: table;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) scale(1) translate(-50%,-50%);
    opacity: 1;
    transition: all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
    content: " ";
  }
  
  .ant-tree-checkbox-inner:after {
    position: absolute;
    top: 50%;
    left: 30%;
    display: table;
    width: 5.71428571px;
    height: 9.14285714px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) scale(0) translate(-50%,-50%);
    opacity: 0;
    transition: all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s;
    content: " ";
  }
  
  .ant-checkbox-checked .ant-checkbox-inner, .ant-tree-checkbox-checked .ant-tree-checkbox-inner {
    background-color: #4e68f0;
    border-color: #4e68f0;
  }